import React from 'react';
import { View } from 'react-native';
import { Lt, Color, NavTheme as Nav, Label, Button, Jpp, Jx, Navigator, Input, Dialog } from "../_utils";
import { Net, NET_GET, NET_RI } from "../_net"
import { LabelHead, cMe } from './_me';

class ViewCash extends React.PureComponent{
    render(){
        const {title, isWhite, children} = this.props;
        return <LabelHead style={{
            backgroundColor : isWhite ? "white" : "rgba(255, 255, 255, 0.1)",
            borderRadius:Lt.radiu2,
            marginHorizontal:5,
            height : 80,
        }}
        titleStyle = {{
            color : isWhite ? Color.theme : Color.whiteOpacity,
        }}
        contentStyle={{
            color : isWhite ? Color.theme : "white",
        }}
        title={title}
        >{children}</LabelHead>
    }
}
class InputCash extends React.PureComponent{
    render(){
        const {style, title, fill, children} = this.props;
        return <View style={{margin:Lt.margin, paddingLeft:5, flexDirection:"row", alignItems:"center", backgroundColor:"#F3F3F3", borderRadius:Lt.radius, ...style}}>
            <Label style={{fontSize:Lt.c16, color:Color.c3}}>
                {title}{fill ? <Label style={{fontSize:Lt.c16, opacity:0}}>{fill}</Label> : null}
            </Label>
            <View style={{flex:1, height:Jpp.inputHeight, marginVertical:5}}>{children}</View>
        </View>
    }
}
const c_placeholders = ["支付宝", "真实姓名", "提现金额"];
const c_fills = ["  ", "", ""];
// 提现界面
export class Cash extends React.PureComponent{
    constructor(props){
        super(props);
        this.state = {
            data : {
                waitMoney : Jpp.questionMark,
                finishMoney : Jpp.questionMark,
                cash : Jpp.questionMark,
            },
            clickable : false,
        }

        this.alipay = "";
        this.name = "";
        this.amount = "";
        
        this.props.navigation.setParams({
            onRecord:this.onRecord.bind(this),
        });
        this.onCash = this.onCash.bind(this);
    }
    static navigationOptions = ({navigation, screenProps})=>({
        ...Nav.options,
        headerTitle:"提现",
        headerRight:<Nav.Touch onPress={()=>navigation.state.params.onRecord()} title={"提现记录"}/>
    })
    componentWillMount(){
        Net.request("member/cash", null, {NET_RI}).then(r=>{
            if(r.data){
                let data = cMe.toCash(r.data);
                this.setState({data})
                if(parseFloat(data.cash) > 1){
                    this.setState({clickable : true});
                }
            }
        });
    }
    onCash(){
        let str = Jx.checkInput(this.alipay);
        if(str){
            Dialog.msg1(c_placeholders[0] + str);
            return;
        }
        str = Jx.checkInput(this.name);
        if(str){
            Dialog.msg1(c_placeholders[1] + str);
            return;
        }
        str = Jx.checkInterger(this.amount);
        if(str){
            Dialog.msg1(c_placeholders[2] + str);
            return;
        }
        const { data } = this.state;
        if(parseFloat(this.amount) > parseFloat(data.cash)){
            Dialog.toast("金额不足以提现");
            return;
        }
        Net.request("member/apply?money=" + this.amount + "&account=" + this.alipay + "&name=" + this.name, null, {NET_GET, NET_RI}).then(r=>{
            Dialog.msg1("提现成功等待审核");
        })
    }
    onRecord(){
        Navigator.push("CashRecord");
    }
    render(){
        const { data, clickable } = this.state;
        return <View style = {{flex:1, backgroundColor:"white"}}>
            <Nav.StatusBar/>
            <View style = {{paddingVertical:Lt.pad, backgroundColor:Color.theme,flexDirection:"row", justifyContent:"space-around"}}>
                <ViewCash title={"已结算"}>{data.finishMoney}</ViewCash>
                <ViewCash title={"可提现"} isWhite={true}>{data.cash}</ViewCash>
                <ViewCash title={"待结算"}>{data.waitMoney}</ViewCash>
            </View>
            <Label style={{marginLeft:Lt.margin, marginTop:20, fontSize:Lt.c18, color:Color.c3}}>提现到支付宝</Label>
            <InputCash title={c_placeholders[0]} fill={c_fills[0]}>
                <Input.Default onChangeText = {t=>this.alipay=t}  placeholder={"支付宝账号或支付宝手机号"}/>
            </InputCash>
            <InputCash title={c_placeholders[1]}  fill={c_fills[1]}>
                <Input.Default onChangeText = {t=>this.name=t} />
            </InputCash>
            <InputCash title={c_placeholders[2]}  fill={c_fills[2]}>
                <Input.Number onChangeText = {t=>this.amount=t} placeholder={"输入整数"}/>
            </InputCash>
            <Button.FlexPure style={{backgroundColor: clickable ? Color.theme : "gray"}} onPress={clickable ? this.onCash : null } title={"提现"}/>
        </View>;
    }
}